<template>
  <div class="e-table-can-edit">

    <h2 class="title_h2 is20">$canEdit 是否同行编辑</h2>
    <p>当table一行数据中$canEdit = true 时，并且有slotEditName专属的编辑插槽，便可以开始编辑</p>

    <h3 class="title_h3">同行编辑、新增</h3>
    <div class="e-vue-demo-block">
      <div class="e-vue-source">
        <evue-table ref="eVue" :data="list" :option="option">
          <template v-slot:slotTopLeft>
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="addTableData">新增</el-button>
          </template>

          <template v-slot:menu="props">

            <el-button type="text" size="mini" icon="el-icon-edit" @click="handleEditData(props)">
              {{props.data.$canEdit?'保存':'编辑'}}
            </el-button>

            <!-- 只有在编辑模式才显示出来-->
            <el-button v-if="props.data.$canEdit" type="text" size="mini" icon="el-icon-edit"
                       @click="handleCancelEditData(props)">取消
            </el-button>

            <!--编辑状态下不能删除-->
            <el-button v-if="!props.data.$canEdit" type="text" size="mini" icon="el-icon-delete">删除</el-button>


          </template>

          <!--编辑姓名-->
          <template v-slot:editName="props">
            <el-input size="mini" v-model="props.data.name" placeholder="请输入姓名"></el-input>
          </template>
          <!--编辑地址-->
          <template v-slot:editAddress="props">
            <el-input size="mini" v-model="props.data.address" placeholder="请输入地址"></el-input>
          </template>
          <!--编辑时间-->
          <template v-slot:editDate="props">
            <el-date-picker
                    size="mini"
                    v-model="props.data.date"
                    valueFormat="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    type="datetime"
                    placeholder="选择通知日期">
            </el-date-picker>
          </template>

        </evue-table>
      </div>
    </div>

  </div>
</template>

<script>
  import Index from './index';

  export default Index;
</script>
<style lang="scss" scoped>
  @import "index";
</style>
